import { useEffect, useState } from 'react';
import { Message, Input, Form, Box, Button, Card, DatePicker, Radio, Upload, Table, Rating } from '@alifd/next';

export const TextAreaWithErrorTip = (props: {
    defaultValue: any
    onChange: any
    onBlur?: any
    placeholder?: any
}): JSX.Element => {
    const [state, setState] = useState(props.defaultValue ? (props.defaultValue.length > 10 ? 'success' : 'error') : 'error');
    return (
        <Input.TextArea placeholder={props.placeholder} autoHeight={{
            minRows: 1,
            maxRows: 10
          }} state={state} onBlur={(e) => {
            props.onBlur && props.onBlur(e)
        }} showLimitHint maxLength={100} defaultValue={props.defaultValue} style={{
            width: '100%',
        }} onChange={(value) => {
            if (value.length > 10) {
                setState('success');
            } else {
                setState('error');
            }
            props.onChange && props.onChange(value);
        }}></Input.TextArea>
    );
};

export default TextAreaWithErrorTip;
